<template>
	<view class="content">
        <u-navbar bgColor="#fff" :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="班组考勤" >
        </u-navbar>

        <view class="uni-area">
            <!-- 月汇总 -->
            <view class="u-m-t-40 uni-shadow">
                <text class="u-font-32 font-bold">{{kqrq}}月汇总</text>
                <view class="u-m-t-38 u-flex u-row-around">
                    <view v-for="(item,index) in month" :key="index"
                        class="u-flex u-flex-col">
                        <text class="u-font-42 font-bold">{{item.value}}</text>
                        <text class="u-m-t-18 u-font-24 uni-dec-color">{{item.title}}</text>
                    </view>
                </view>
            </view>

            <!-- 日历 -->
            <uni-week-calendar class="u-m-t-40" @change="dateChange" />

            <!-- 日汇总 -->
            <view class="u-m-t-40 uni-shadow">
                <text class="u-font-32 font-bold">{{date}}日汇总</text>
                <view class="u-m-t-38 u-flex u-row-around">
                    <view v-for="(item,index) in day" :key="index"
                        class="u-flex u-flex-col">
                        <text class="u-font-42 font-bold">{{item.value}}</text>
                        <text class="u-m-t-18 u-font-24 uni-dec-color">{{item.title}}</text>
                    </view>
                </view>
            </view>

            <!-- 表格 -->
            <view class="u-m-t-40 u-m-b-30 uni-shadow">
                <view class="uni-table">
                    <u-row class="uni-tr">
                        <u-col span="6" textAlign="center" class="u-font-28 font-bold">班组名称</u-col>
                        <u-col span="2" textAlign="center" class="u-font-28 font-bold">考勤</u-col>
                        <u-col span="2" textAlign="center" class="u-font-28 font-bold">出勤</u-col>
                        <u-col span="2" textAlign="center" class="u-font-28 font-bold">缺勤</u-col>
                    </u-row>
                    <u-row v-for="(item,index) in table" :key="index" class="uni-tr" @tap="people(item.id)">
                        <u-col span="6" textAlign="center" class="u-font-28">{{item.bzmc}}</u-col>
                        <u-col span="2" textAlign="center" class="u-font-28">{{item.zrs}}</u-col>
                        <u-col span="2" textAlign="center" class="u-font-28">{{item.cqrs}}</u-col>
                        <u-col span="2" textAlign="center" class="u-font-28">{{item.qqrs}}</u-col>
                    </u-row>
                </view>
            </view>
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                id: null, // 项目id
                kqrq: this.$tools.formatTime(new Date()).ym,
                date: this.$tools.formatTime(new Date()).ymd,
                month:[
                    { field:'staffs', title:'实名总人数', value: 0 },
                    { field:'atdStaff', title:'进场总人数', value: 0 },
                    { field:'unatdStaffs', title:'缺勤总人数', value: 0 }, 
                ],
                day:[
                    { field:'staffs', title:'实名总人数', value: 0 },
                    { field:'atdStaff', title:'进场总人数', value: 0 },
                    { field:'unatdStaffs', title:'缺勤总人数', value: 0 }, 
                ],
                table:[
                    // bzmc/zrs/cqrs/qqrs/id  名称、考勤、出勤、缺勤、班组编号
                    { bzmc:'加载中',zrs:0, cqrs:0, qqrs:0 },
                ]
			}
		},

		onLoad(option) {
            this.id = option.id // 项目id
            // 班组月日考勤
            this.getKqTeamMonth(option.id)
            this.getKqTeamDay(option.id)
            // 班组列表
            this.getTeamList(option.id)
		},

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },


            // 班组月考勤
            getKqTeamMonth(id){
                uni.showLoading({ title:'月考勤加载中' })
                const prameter = {
                    id: id, 
                    kqrq: this.kqrq,
                }
                // console.log('班组月考勤-参数',prameter)
                this.$request(this,this.$apis.kqTeam,prameter).then(res=>{
                    // console.log('班组月考勤',res)
                    this.month.map((v,i)=>{
                        v.value = res[v.field]
                    })
                }).then()
            },
            // 班组日考勤 
            getKqTeamDay(id){
                uni.showLoading({ title:'日考勤加载中' })
                const prameter = {
                    id: id, 
                    date: this.date,
                }
                // console.log('班组日考勤-参数',prameter)
                this.$request(this,this.$apis.kqTeam,prameter).then(res=>{
                    // console.log('班组日考勤',res)
                    this.day.map((v,i)=>{
                        v.value = res[v.field]
                    })
                }).then()
            },


            // 日期改变
            dateChange(e){
                // console.log('日期改变',e.value)
                this.date = e.value
                this.getKqTeamDay(this.id)
                this.getTeamList(this.id)
            },

            // 班组列表
            getTeamList(gcbh){
                uni.showLoading({ title:'班组列表加载中' })
                this.$request(this,this.$apis.kqTeamList,{gcbh:gcbh}).then(res=>{
                    // console.log('班组列表',res)
                    this.table = res
                }).then()
            },


            // 查看人员考勤
            people(bzbh){
                uni.navigateTo({ url: '/pages/attendance-bag/people?gcbh='+this.id+'&bzbh='+bzbh })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        background: #FBFCFC;
        .uni-table{
            border: 1rpx solid #eee;
            .uni-tr{
                height: 80rpx;
                &:nth-child(odd){
                    background: #F6F7F8;
                }
                &:nth-child(even){
                    background: #fff;
                }
            }
        }
    }
</style>
